<template>
  <div> <!--vue组件中不能存在多个div并行-->
    <div style="padding: 10px 0">
      <el-input style="width: 200px" placeholder="输入问题名称" suffix-icon="el-icon-tickets" class="ml-5"></el-input>
      <!--           <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>-->
      <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索 </el-button>
      <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
<!--      <el-button type="primary" @click="handleAdd">新增一个问题<i class="el-icon-bottom"></i> </el-button>-->
<!--      <el-popconfirm style="margin: 0"-->
<!--                     class="ml-5"-->
<!--                     title="确定删除选中的问题？"-->
<!--                     @confirm="deleteBatch"-->
<!--      >-->
<!--        <el-button style="margin-left: 10px" type="danger" slot="reference">选中删除<i class="el-icon-delete"></i> </el-button>-->
<!--      </el-popconfirm>-->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item style="margin-top: 33px">
          <button class="icon-btn add-btn" @click="handleAdd">
            <div class="add-icon"></div>
            <div class="btn-txt">新增一个问题</div>
          </button>
        </el-form-item>
        <el-form-item >
          <el-popconfirm
              class="ml-5"
              title="确定删除选中的问题？"
              @confirm="deleteBatch"
          >
            <button class="noselect" slot="reference">
              <span class="text" >选中删除</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
          </el-popconfirm>
        </el-form-item>
      </el-form>
      <el-button style="margin-left: 700px" class="ml-5" @click="handleImport">批量导入<i class="el-icon-bottom"></i> </el-button>
      <el-button @click="handleExport">选中导出<i class="el-icon-top"></i> </el-button>
    </div>
    <el-table v-show="mainTableVisible" :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="110">
      </el-table-column>
      <el-table-column prop="type" label="问题类型" width="140">
      </el-table-column>
      <el-table-column prop="name" label="问题名称" width="200">
      </el-table-column>
      <el-table-column prop="choice" label="选项" width="250">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <el-button type="success" @click="handleEdit(scope.row)" style="padding: 5px">编辑<i class="el-icon-edit-outline"></i> </el-button>-->
          <button class="edit" @click="handleEdit(scope.row)" style="margin-top: 5px">
            <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
            </svg>编辑</button>
<!--          <el-popconfirm-->
<!--              class="ml-5"-->
<!--              title="确定删除？"-->
<!--              @confirm="handleDel(scope.row.id)"-->
<!--          >-->
<!--            <el-button type="danger" slot="reference" style="padding: 5px">删除<i class="el-icon-delete"></i></el-button>-->
<!--          </el-popconfirm>-->
          <el-popconfirm
              width="200"
              class="ml-5"
              title="确定删除？"
              confirm-button-type="primary"
              @confirm="handleDel(scope.row.id)"
          >
            <button class="noselect"  style="border-radius: 50px;" slot="reference">
              <span class="text" style="font-size: 13px;font-weight: normal;">删除</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog :append-to-body="true" :title.sync="infoDialogTitle" :visible.sync="infoDialogVisible" width="30%">
      <el-form>
        <el-form-item label="问题类型" label-width="80px">
          <el-select v-model="form.type" autocomplete="off" placeholder="请选择问题类型" @change="handleTypeChange">
            <el-option label="单选" value="单选"></el-option>
            <el-option label="多选" value="多选"></el-option>
            <el-option label="填空" value="填空"></el-option>
            <el-option label="矩阵" value="矩阵" disabled></el-option>
            <el-option label="量表" value="量表" disabled></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题名称" label-width="80px">
          <el-input v-model="form.name" placeholder="请选择问题名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-show="form.flag" label="问题选项" label-width="80px">
          <el-input v-model="form.choice" type="textarea" autosize placeholder="请输入问题选项，使用分号分隔" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :append-to-body="true" :title.sync="importDialogTitle" :visible.sync="importDialogVisible" width="30%">
      <el-form>
        <el-link target="_blank" disabled>将文件拖到窗口或者点击浏览以导入。</el-link>
        <el-link target="_blank" disabled>支持的文件格式：csv、xls、xlsx。</el-link>
        <el-link type="primary">查看示例</el-link>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="float: left" @click="cancel">浏览</el-button>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :append-to-body="true" :title.sync="exportDialogTitle" :visible.sync="exportDialogVisible" width="30%">
      <el-form>
        <el-link target="_blank" disabled>您可以将问题导出下载。</el-link>
        <el-link target="_blank" disabled>选择XLSX将保留问题的类型、名称、选项（如果有），选择CSV将保留问题的类型、名称。</el-link>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="float: left" type="primary" @click="cancel">XLSX</el-button>
        <el-button style="float: left" type="primary" @click="cancel">CSV</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "QuestionManage",
  data(){
    return{
      tableData: [{
        id: 232434,
        type: '填空',
        name: '申请人学号',
        flag: false,
        choice: ''
      }, {
        id: 232435,
        type: '多选',
        name: '你希望的聚餐地点有',
        flag: true,
        choice: '壹方城；车公庙附近；会展中心附近；海雅缤纷城'
      }, {
        id: 232436,
        type: '多选',
        name: '下列选项中是项目与日常运作的区别的是',
        flag: true,
        choice: '项目是以目标为导向的，日常运作是通过效率和有效性体现的；' +
            ' 项目是通过项目经理及其团队工作完成的，而日常运作是职能式的线性管理；' +
            '项目需要有专业知识的人来完成，而日常运作的完成无需特定专业知识；' +
            '项目是一次性的，日常运作是重复性的'
      }, {
        id: 232437,
        type: '单选',
        name: '你目前所属的部门是',
        flag: true,
        choice: '综合办；销售部；技术部；采购部生产部；质管部；财务部'
      }, {
        id: 232438,
        type: '单选',
        name: '学校是否有活动安排',
        flag: true,
        choice: '是；否'
      }],
      total:3,
      searchData:{},
      name:"",
      pageNum:1,
      pageSize:5,
      infoDialogTitle: '编辑问题',
      infoDialogVisible:false,
      importDialogTitle: '导入问题',
      importDialogVisible:false,
      exportDialogTitle: '导入问题',
      exportDialogVisible:false,
      importExportState: 0, //0#导入 1#导出
      mainTableVisible:true,
      form:{},
      multipleSelection:[],
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      // this.request.get("http://localhost:9090/billing/page",{
      //   params:{
      //     pageNum: this.pageNum,
      //     pageSize:this.pageSize,
      //   }
      // }).then(res =>{
      //   this.tableData=res.records
      //   this.total=res.total
      // })
    },
    save() {
      if(this.form.type === "单选" || this.form.type === "多选" && this.form.choice === ""){
        // this.form.name = "（不可用）" + this.form.name
        this.form.type += "（不可用）"
      }
      if (this.form.id == null) {
        this.form.type = "question"
        this.form.state = 1
      }
      this.infoDialogVisible = false
      this.load()
      // this.request.post("http://localhost:9090/billing/save",this.form).then(res =>{
      //   if(res){
      //     this.dialogFormVisible=false;
      //     this.pageNum=Math.floor(this.total/this.pageSize+1)
      //     this.reset()
      //     this.$message.success("保存成功")
      //   } else{
      //     this.$message.error("保存失败")
      //   }
      // })
    },
    handleTypeChange() {
      if (this.form.type === "单选" || this.form.type === "多选"){
        this.form.flag = true
      }else {
        this.form.flag = false
      }
    },
    handleAdd(){
      this.infoDialogTitle= '新增一个问题'
      this.form={}
      this.infoDialogVisible=true;
    },
    handleEdit(row) {
      this.infoDialogTitle= '编辑问题'
      this.form = row
      this.infoDialogVisible = true;
    },
    handleImport() {
      this.importDialogVisible = true;
    },
    handleExport() {
      this.exportDialogVisible = true;
    },
    handleDel(id) {
      // this.request.delete("http://localhost:9090/billing/"+id).then(res =>{
      //   if(res){
      //     this.dialogFormVisible=false;
      //     this.reset()
      //     this.$message.success("中止成功")
      //   } else{
      //     this.$message.error("中止失败")
      //   }
      // })
    },
    deleteBatch() {
      // let ids = this.multipleSelection.map(v => v.id)
      // this.request.post("http://localhost:9090/billing/del/batch",ids).then(res =>{
      //   if(res){
      //     this.dialogFormVisible=false;
      //     this.reset()
      //     this.$message.success("中止成功")
      //   } else{
      //     this.$message.error("中止失败")
      //   }
      // })
    },
    reset() {
      this.searchData = {}
      this.load()
    },
    cancel() {
      this.infoDialogVisible = false
      this.importDialogVisible = false
      this.exportDialogVisible = false
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>